<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_xniyiy3gpp/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;

        }
        body{
            background-color: rgb(104, 107, 107);
        }
        header{
            width: 1024;
            height: 80px;
            background-color: #0099cb;

        }
        header .first{
            font-size: 30px;
            margin: 20px;
            line-height: 80px;
            color: #fff7ff;
            font-weight: 800;
        }
        header .iconfont{
            font-size: 25px;
        }
        header .T_right{
            margin-left: 900px;
            font-size: 20px;
            color: #fff7ff ;
        }
        .TA_right{
            color: #fff7ff ;
            font-size: 20px;
        }
        .left{
            width: 180px;
            height: 900px;
            background-color: #2d3e50;
            float: left;
        }
        .left ul li{
            width: 180px;
            height: 90px;
            margin-left: 30px;
            line-height: 90px;
            color:  #fff7ff ;
        }
        .h{
            width: 1024;
            height: 50px;
            /* border: 1px solid red; */
        }
        .h span{
            width: 100px;
            height: 50px;
            color: #fff7ff;
            background-color: #2d3e50;
            float: left;
            margin-left: 40px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            justify-content: space-between;
        }
        .wh{
            width: 1024;
            height: 100px;
            /* background-color: red; */
        }
        .nh{
            width: 20%;
            height: 80px;
            /* border: 1px solid #000; */
            float: left;
            margin-left: 24px;
            /* line-height: 50px; */
            background-color: #0099cb;
        }
        .n-h{
            width: 20%;
            height: 80px;
            /* border: 1px solid #000; */
            float: left;
            margin-left: 23px;

            /* line-height: 0px; */
            background-color: #14c376;
        }
        .nh span{
            font-size: 20px;
            color: #fff7ff;
            line-height: 70px;
        }
        .n-h span{
            font-size: 20px;
            color: #fff7ff;
            line-height: 70px;
        }
        .tu{
            width: 88%;
            height: 400px;
            /* border: 1px solid red; */
            float: left;
        }
        #container{
            width: 48.5%;
            height: 400px;
            background-color: #fff;
            float: left;
            margin-left: 25px;
        }
        #right{
            width: 49%;
            height: 400px;
            background-color: #fff;
            float: left;
           
        }
        .xuan{
            width: 1024;
            height: 400px;
            /* border: 1px solid #000; */
            /* float: left; */
        }
        table{
            margin-top: 10px;
            width: 87.5%;
            height: 340px;
            background-color: #fff7ff;
            /* background-color: #000; */
            /* border: 1px solid #000; */
            float: left;
            text-align: center;
        }
       table th{
        max-width: 300px;
        min-width: 150px;
        line-height: 20px;

       }
       table td div{
        height: 10px;
       
        background-color: #000;
        
       } 

    </style>
</head>
<body>
    <header>
        <span class="first">后台管理系统<span class="iconfont">&#xeaf1;</span></span>      
            <span class="T_right">当前用户:bootstrap中文</span><span>&nbsp;&nbsp;&nbsp;</span><span class="TA_right">角色：管理员</span>        
    </header>
    <div class="left">
        <ul>
            <li><span class="iconfont">&#xe83a;</span><span>&nbsp;&nbsp;</span>后台首页</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe62e;</span><span>&nbsp;&nbsp;</span>设计元素</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe62c;</span><span>&nbsp;&nbsp;</span>表单元素</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe69f;</span><span>&nbsp;&nbsp;</span>示例页面</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe620;</span><span>&nbsp;&nbsp;</span>常用列表</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe65c;</span><span>&nbsp;&nbsp;</span>脚本插件</li><span class="iconfont jiantou_yemian_xiangyou"></span>
            <li><span class="iconfont">&#xe626;</span><span>&nbsp;&nbsp;</span>统计数据</li><span class="iconfont jiantou_yemian_xiangyou"></span>
        </ul>

    </div>
    <div class="h">
        <span>欢迎首页</span>   
        
    </div>
    <div class="wh">
        <div class="nh">
            <p>今日收入</p>
            <span>1000000000</span>
        </div>
        <div class="nh">
            <p>昨日收入</p>
            <span>200,000,00</span>
        </div>
        <div class="n-h">
            <p>月度累计收入</p>
            <span>1000,000,00</span>
        </div>
        <div class="n-h">
            <p>年度累计收入</p>
            <span>5,000,000,00</span>
        </div>

    </div>
    <div class="tu">
        <div id="right"></div>
        <div id="container"></div>
    </div>
    <div class="xuan">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>订单号</th>
                    <th>商品名称</th>
                    <th>下单日期</th>
                    <th>状态</th>
                    <th>处理情况</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
</html>
<script src="./promise-ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>

<script>
 var con = document.querySelector('#container');
    var e = echarts.init(con);
    e.setOption({
        title: { //图表的标题
            text: '每年收入走势',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ["2009","2010","2011","2012","2013","2014","2015","2016","2018","2019","2020"]
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true,
            }
        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                showBackground: true, //显示背景色
                smooth: true,
                
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#83bff6'
                    },
                    {
                        offset: 0.5,
                        color: '#188df0'
                    },
                    {
                        offset: 1,
                        color: '#188df0'
                    }
                ]),
                type: 'line', //'line' , 'bar' , 'pie'
                data: [50,55,60,40,45,40,65,40,68,20,72,60]
            },
            {
                name: '每年同期收入走势',
                type: 'line', //'line' , 'bar' , 'pie'
                data: [46,50,52,48,40,35,65,45,58,30,72,58],
                symbolSize: 15, //圆点大小
                symbol: 'circle', //圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'pink', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        borderColor: 'white', //圆点的边框颜色
                        lineStyle: {
                            width: 2
                        }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });
    var rig = document.querySelector('#right');
    var a = echarts.init(rig);

    //2.绘制图表
    a.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ["01","02","03","04","05","06","07","08","09","10","11","12"]
        },
        yAxis: { //y轴设置
            splitLine: {
                show: false
            }
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 10, //柱子的宽度
                showBackground: true, //显示背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#83bff6'
                    },
                    {
                        offset: 0.5,
                        color: '#188df0'
                    },
                    {
                        offset: 1,
                        color: '#188df0'
                    }
                ]),
                type: 'bar', //'line' , 'bar' , 'pie'
                data: [2600,1600,1700,3300,4700,3500,1700,2500,2300,1800,3900,1800]
            },
            {
                name: '同期每月收入',
                barWidth: 10,
                showBackground: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#FF0000'
                    },
                    {
                        offset: 0.5,
                        color: '#B22222'
                    },
                    {
                        offset: 1,
                        color: '#8B0000'
                    }
                ]),

                type: 'bar', //'line' , 'bar' , 'pie'
                data: [2100,1700,1900,3000,4000,3700,1800,2000,280,2600,3800,3700],


            }

        ]
    });
    render( data.list )

//渲染表格数据
function render( data ){
    var str = data.map((item,index)=>{
        return `<tr>
                    <td>${item.id}</td>
                    <td>${item.phone}</td>
                    <td>黑色休闲裤</td>
                    <td>2019-09-${item.day}</td>
                    <td><span style="color:${item.hue};">${item.ingroup}</span></td>                    
                    <td><div style="width:${item.chang}px;height:10px;background-color:${item.hue};border-radius: 5px;"></div></td>
                   
                </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML = str;
}


</script>